<template>
	<view class="historyListPage px-3 pt-3">
		<!-- <button v-if="historyList.length !== 0" type="primary" class="margin-top" style="width: 100%;margin-bottom: 40upx; font-size: 14px;background: #fff; color:#007aff;border: .5px solid #007aff;"
		 @tap="claerhistoryList">清空</button> -->
		<newsSlide v-for="(item,index) in historyList" :key="index" :item="item" :index="index"></newsSlide>
		<view v-if="historyList.length == 0" class="px-3 d-flex j-center a-center" style="width: 100%;">
			<text class="font-32">暂无历史记录</text>
		</view>
	</view>
</template>

<script>
	import newsSlide from "@/components/module/news-item.vue"
	export default {
		name: "historyListPage",
		components: {
			newsSlide
		},
		data() {
			return {
				historyList: []
			}
		},
		
		methods: {
			claerhistoryList() {
				uni.showModal({
					content: "是否要清空历史记录?",
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync('history');
							this.historyList = []
						}
					}
				})
			}
		},
		onLoad() {
			//取出历史记录
			let list = uni.getStorageSync('history');
			console.log(JSON.parse(list))
			if (list) {
				this.historyList = JSON.parse(list).filter(item => {return item != null}).splice(0,20)
			}
		},
		mounted() {
           
		}
	}
</script>

<style>
	.historyListPage {
		clear: both;

	}
</style>
